<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jfcss.css" rel="stylesheet">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.goup.min.js"></script>
    <script type="text/javascript" src="js/jframe.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
</head>
<body >
<nav id="jf-head-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">

</nav>
<div class="container">
    <div class="row">
        <!-- 添加导航元素，最热，最新-->
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="tab-active"><a href="#">最新</a></li>
                <li ><a href="#">热门</a></li>
            </ul>
        </div>
    </div>
    <div class="row">

        <div class="col-md-9 col-sm-12" style="padding: 0px">

            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 jf-album-cell">
                <div><img src="img/6.jpeg" class="jf-album-cell-img"></div>
                <div class="jf-album-cell-title">
                    <a href="./album-detail.html">专辑标题专辑标题最多占用两行,专辑标题专辑标题最多占用两行,专辑标题专</a>
                </div>
            </div>

        </div>


        <!-- 右侧展示栏-->
        <div class="col-md-3 hidden-xs hidden-sm">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>
                        Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
                        如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <div style="text-align: center">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul><br>
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top: 100px">
    <footer >
        <div style="text-align: center">
            Copyright © 2016 jframe.cn<br>
            蜀ICP备16009498号
        </div>

    </footer>
</div>


</body>
</html>
